// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "../../js/ThemeInfo.js" as ThemeInfo

AndroidAppItem {
    id: _root

    property variant themeList: []

    property real delegateImageWidth: 462
    property real delegateImageHeight: 729
    property real delegateRectHeight: 161

    //テーマ一覧を更新
    onThemeListChanged: {
        _list.model.clear();
        for(var i=0; i<themeList.length; i++){
            _list.model.append({"_name": themeList[i].name
                               , "_source": themeList[i].path});
        }
    }

    Image{
        id: _background
        anchors.fill: parent
        source: "images/ComJcromJcbeam/background.png"
    }
    Item{
        id: _header
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: 173 * viewScale
    }
    ListView{
        id: _list
        anchors.top: _header.bottom
        anchors.bottom: _footer.top
        anchors.left: parent.left
        anchors.right: parent.right
        orientation: ListView.Horizontal
        snapMode: ListView.SnapToItem
        model: ListModel{}
        delegate: Rectangle{
            width: _list.width
            height: _list.height
            color: "#bbbbbb"
            Image{
                anchors.centerIn: parent
                width: _root.delegateImageWidth * viewScale
                height: _root.delegateImageHeight * viewScale
                source: _source
            }
            Rectangle{
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: _root.delegateRectHeight * viewScale
                color: "#44000000"
                Text{
                    anchors.top: parent.top
                    anchors.topMargin: 10 * viewScale
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: _name
                    font.pixelSize: 68 * viewScale
                    color: "#ffffff"
                }
            }
        }
    }
    Item{
        id: _footer
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 191 * viewScale
    }


    states: [
        State {
            name: "Land"
            when: !isPortrait
            PropertyChanges {
                target: _root
                delegateImageWidth: 266
                delegateImageHeight: 419
//                delegateRectHeight: 161
            }
            PropertyChanges {
                target: _background
                source: "images/ComJcromJcbeam/background_land.png"
            }
            PropertyChanges {
                target: _header
                height: 131 * viewScale
            }
            PropertyChanges {
                target: _footer
                height: 80 * viewScale
            }
        }
    ]
}
